extends ./layouts/default

block title
  title pug模块-模板

block content
  include ./includes/header
  .container-fluid
    .row
      .col-md-3
        h1 Hi #{you}
        p This is #{me}
      .col-md-9.row
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
        .col-md-3.imgbox__div
          img(src="http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658", alt="图一").imgmMvie__img
          span 电影一
  #dplayer
  script.
    const  dplayer = new DPlayer({
      element: document.getElementById('dplayer'),
      autoplay: false,
      theme: '#FADFA3',
      loop: false,
      screenshot: true, //截屏
      hotkey: false,
      logo: 'http://img.hb.aicdn.com/da5e04faa43cff1ec3369badcffbb76d1e9a6f512a2e5-r8gK0r_fw658',
      video: {  //视频源 包含不同分辨率源
          quality: [{
              name: '普清',
              url: "https://91moe-my.sharepoint.com/personal/diygod_bilibili_com_sb/_layouts/15/download.aspx?UniqueId=412c3249-cdd6-4360-ba2d-416d7c565308&Translate=false&tempauth=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvOTFtb2UtbXkuc2hhcmVwb2ludC5jb21ANWU5NzAxMGUtN2VkNy00NTc1LWFiNzMtYjdkOTVmMjYyMjM0IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTUzNTAzMjIyMiIsImV4cCI6IjE1MzUwMzU4MjIiLCJlbmRwb2ludHVybCI6Ijk1SWNHZ2NJOWN0bVVPWHA5dEZXcytIMW5FVWxqL2ZPY29pOXJzd25Xd289IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxNTEiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Illqa3daVGhoTUdRdE16Y3dOeTAwT0RCa0xUZzRPRGN0WVRrME1EVXpPVGhrTWpVeCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJPR00wTW1KalpXRXRZemc1T0MwME9XVmtMV0pqTUdRdFlqYzRaakF3T1RRME5qSTQiLCJhcHBfZGlzcGxheW5hbWUiOiJvbmVpbmRleCIsInNpZ25pbl9zdGF0ZSI6IltcImttc2lcIl0iLCJhcHBpZCI6ImNkNjYzZGZhLWI1YzctNGU3NC04MmQxLWRkYzZkYTQ2M2NjMCIsInRpZCI6IjVlOTcwMTBlLTdlZDctNDU3NS1hYjczLWI3ZDk1ZjI2MjIzNCIsInVwbiI6ImRpeWdvZEBiaWxpYmlsaS5jb20uc2IiLCJwdWlkIjoiMTAwMzdGRkVBQkZEOUEwRSIsInNjcCI6ImFsbGZpbGVzLndyaXRlIiwidHQiOiIyIiwidXNlUGVyc2lzdGVudENvb2tpZSI6bnVsbH0.N01hSVBmVW1IZ201dkw1bkFjcGRLK0VYU1ZUVHRIM0J6UFI0SnBBdEJpST0&ApiVersion=2.0"
          },{
              name: '高清',
              url: "https://91moe-my.sharepoint.com/personal/diygod_bilibili_com_sb/_layouts/15/download.aspx?UniqueId=412c3249-cdd6-4360-ba2d-416d7c565308&Translate=false&tempauth=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvOTFtb2UtbXkuc2hhcmVwb2ludC5jb21ANWU5NzAxMGUtN2VkNy00NTc1LWFiNzMtYjdkOTVmMjYyMjM0IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTUzNTAzMjIyMiIsImV4cCI6IjE1MzUwMzU4MjIiLCJlbmRwb2ludHVybCI6Ijk1SWNHZ2NJOWN0bVVPWHA5dEZXcytIMW5FVWxqL2ZPY29pOXJzd25Xd289IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxNTEiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Illqa3daVGhoTUdRdE16Y3dOeTAwT0RCa0xUZzRPRGN0WVRrME1EVXpPVGhrTWpVeCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJPR00wTW1KalpXRXRZemc1T0MwME9XVmtMV0pqTUdRdFlqYzRaakF3T1RRME5qSTQiLCJhcHBfZGlzcGxheW5hbWUiOiJvbmVpbmRleCIsInNpZ25pbl9zdGF0ZSI6IltcImttc2lcIl0iLCJhcHBpZCI6ImNkNjYzZGZhLWI1YzctNGU3NC04MmQxLWRkYzZkYTQ2M2NjMCIsInRpZCI6IjVlOTcwMTBlLTdlZDctNDU3NS1hYjczLWI3ZDk1ZjI2MjIzNCIsInVwbiI6ImRpeWdvZEBiaWxpYmlsaS5jb20uc2IiLCJwdWlkIjoiMTAwMzdGRkVBQkZEOUEwRSIsInNjcCI6ImFsbGZpbGVzLndyaXRlIiwidHQiOiIyIiwidXNlUGVyc2lzdGVudENvb2tpZSI6bnVsbH0.N01hSVBmVW1IZ201dkw1bkFjcGRLK0VYU1ZUVHRIM0J6UFI0SnBBdEJpST0&ApiVersion=2.0"
          }, {
              name: '超清',
              url: "https://91moe-my.sharepoint.com/personal/diygod_bilibili_com_sb/_layouts/15/download.aspx?UniqueId=412c3249-cdd6-4360-ba2d-416d7c565308&Translate=false&tempauth=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvOTFtb2UtbXkuc2hhcmVwb2ludC5jb21ANWU5NzAxMGUtN2VkNy00NTc1LWFiNzMtYjdkOTVmMjYyMjM0IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTUzNTAzMjIyMiIsImV4cCI6IjE1MzUwMzU4MjIiLCJlbmRwb2ludHVybCI6Ijk1SWNHZ2NJOWN0bVVPWHA5dEZXcytIMW5FVWxqL2ZPY29pOXJzd25Xd289IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxNTEiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Illqa3daVGhoTUdRdE16Y3dOeTAwT0RCa0xUZzRPRGN0WVRrME1EVXpPVGhrTWpVeCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJPR00wTW1KalpXRXRZemc1T0MwME9XVmtMV0pqTUdRdFlqYzRaakF3T1RRME5qSTQiLCJhcHBfZGlzcGxheW5hbWUiOiJvbmVpbmRleCIsInNpZ25pbl9zdGF0ZSI6IltcImttc2lcIl0iLCJhcHBpZCI6ImNkNjYzZGZhLWI1YzctNGU3NC04MmQxLWRkYzZkYTQ2M2NjMCIsInRpZCI6IjVlOTcwMTBlLTdlZDctNDU3NS1hYjczLWI3ZDk1ZjI2MjIzNCIsInVwbiI6ImRpeWdvZEBiaWxpYmlsaS5jb20uc2IiLCJwdWlkIjoiMTAwMzdGRkVBQkZEOUEwRSIsInNjcCI6ImFsbGZpbGVzLndyaXRlIiwidHQiOiIyIiwidXNlUGVyc2lzdGVudENvb2tpZSI6bnVsbH0.N01hSVBmVW1IZ201dkw1bkFjcGRLK0VYU1ZUVHRIM0J6UFI0SnBBdEJpST0&ApiVersion=2.0"
          }],
          defaultQuality: 0,
          pic: '',
          type: 'auto'
        }
    })
    $(document).ready(function() {
      $('.row').click(() => {
        let isBlock = document.querySelector('#dplayer').style.display
        if( isBlock != "none") {
          document.querySelector('#dplayer').style.display = "none";
        }
      })
      $('.imgmMvie__img').click((event) => {
        event.stopPropagation()
        let isBlock = document.querySelector('#dplayer').style.display
        if( isBlock != "block") {
          $('#dplayer').css({display: 'block'})
        } else {
          $('#dplayer').css({display: 'none'})          
        }
      })
    })